<script>
import Pagination from './Pagination.vue';
export default {
	title: 'ProjectPlanReportManage',
	components: {
		Pagination
  },
  data() {
    return {
			selectValue: 'title',
			selectOptions: [
				{value: 'title', label: '报告名称'},
				{value: 'target', label: '统计对象'},
				{value: 'nickname', label: '创建人用户名'},
				{value: 'truename', label: '创建人姓名'},
			],
			inputValue: '',
			columns: [
				{
					title: '报告名称',
					dataIndex: 'title',
					slots: { customRender: 'title'},
					width: 256,
				},
				{
					title: '统计对象',
					dataIndex: 'statistical',
					slots: { customRender: 'statistical' },
					width: 256,
				},
				{
					title: '所属部门',
					dataIndex: 'org',
					slots: { customRender: 'org' },
				},
				{
					title: '统计时间',
					dataIndex: 'reportTime',
				},
				{
					title: '创建者/时间',
					dataIndex: 'creator',
					slots: { customRender: 'creator' },
				},
				{
					title: '报告类型',
					dataIndex: 'targetType',
					slots: { customRender: 'targetType' },
				},
				{
					title: '操作',
					fixed: 'right',
					width: 160,
					slots: { customRender: 'action' },
				},
			],
			data: [],
			selectedRowKeys: [],
			selectedRows: [],
			loading: false,
			pageSize: 10,
      total: 7,
      currentPage: 1,
    };
  },
  mounted() {
		let resData = [
				{
					"id": 12,
					"title": "xxx培训项目名1",
					"reportTime": 1684774800,
					"creator": {
						"nickname": "admin",
						"truename": "张尧",
						"createdTime": 1684774800
					},
					"targetType": "projectPlan",
					"org": {
						"code": "xx",
						"name": "aaa"
					},
					"statistical": {
						"title": "xxx培训项目名1",
						"category": {
							"code": "xx",
							"name": "aaa"
						}
					}
				},
				{
					"id": 21,
					"title": "恒常很长诉讼诉讼三四岁饿死很长很长很长很长很长很长搜索培训项目名称2",
					"reportTime": 1684774800,
					"creator": {
						"nickname": "admin",
						"truename": "张章所",
						"createdTime": 1684774800
					},
					"org": {
						"code": "FullSite",
						"name": "向阳花"
					},
					"targetType": "projectPlan",
					"statistical": {
						"title": "恒常很长诉讼诉讼三四岁饿死很长很长很长很长很长很长搜索培训项目名称2",
						"category": {
							"code": "分类编码",
							"name": "QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ"
						}
					}
				}
			];
			this.data = resData;
		this.total = this.data.length;
		this.data.forEach((item, index) => {
			this.data[index].reportTime = resData[index].reportTime * 1000;
			this.data[index].creator.createdTime = resData[index].creator.createdTime * 1000;
			if (resData[index].targetType == 'projectPlan') {
				this.data[index].targetType = '培训报告';
			};
		});
	},
  methods: {
		search() {
			console.log('selectValue:', this.selectValue, 'inputValue:', this.inputValue);
		},
		onChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys;
			this.selectedRows = selectedRows;
			console.log( 'this.selectedRowKeys:', this.selectedRowKeys);
		},
		getCheckboxProps: record => ({
			title: record.title,
		}),
		clearSelected() {
			this.selectedRowKeys = [];
		},
		PageChange(page) {
      // this.getUserList(this.pageSize, (page - 1) * this.pageSize);
    },
		handleMenuClick(rowKey, event) {
			console.log(rowKey, event);
		},
		share() {
			
		},
		send() {

		},
		view() {

		},
		edit() {

		},
		delete() {
			
		}
	},
};
</script>

<template>
  <div class="project-plan-report-manage">
    <div class="search-box">
        <a-select class="search-box__select" v-model:value="selectValue" :options="selectOptions"></a-select>
        <a-input 
					v-model:value="inputValue"
					placeholder="输入关键词"
					:max-length="25"
					class="search-box__input"
					>
				</a-input>
        <a-button type="primary" ghost @click="search()">搜索</a-button>
    </div>
		<div class="table-box">
			<a-table class="table-box__table" :rowKey="(data) => data.id" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onChange, getCheckboxProps: getCheckboxProps }" :columns="columns" :data-source="data" :scroll="{ x: 1300 }" :loading="loading" :pagination="false">
				<template #title="{ text }">
					<a-tooltip placement="topLeft">
						<template #title>
							{{ text }}
						</template>
						<div class="table-box__table__title">{{ text }}</div>
					</a-tooltip>
				</template>
				<template #statistical="{ text: statistical }">
					<a-tooltip placement="topLeft">
						<template #title>
							{{ statistical.title }}
						</template>
						<div class="table-box__table__statistical">{{ statistical.title }}</div>
					</a-tooltip>
					<a-tooltip placement="topLeft">
						<template #title>
							{{ statistical.category.name }}
						</template>
						<div class="table-box__table__statistical">分类：{{ statistical.category.name }}</div>
					</a-tooltip>
				</template>
				<template #org="{ text: org }">
					<div>{{ org.name }}</div>
					<div>编码：{{ org.code }}</div>
				</template>
				<template #creator="{ text: creator }">
					<div>{{ creator.truename }}</div>
					<div>{{ creator.nickname }}</div>
					<div>{{ creator.createdTime }}</div>
				</template>
				<template #action="{rowKey}">
					<a class="pr-16" @click="share">分享</a>
					<a class="pr-16" @click="send">发送</a>
					<a-dropdown :trigger="['click']" placement="bottomRight">
						<a class="ant-dropdown-link" @click.prevent>
							...
    				</a>
						<template #overlay>
							<a-menu @click="handleMenuClick(rowKey, event)">
								<a-menu-item key="1">
									查看
								</a-menu-item>
								<a-menu-item key="2">
									编辑
								</a-menu-item>
								<a-menu-item key="3">
									删除
								</a-menu-item>
							</a-menu>
						</template>
					</a-dropdown>
				</template>
			</a-table>
		</div>
		<div class="footer">
			<div class="delete-batches">
				<span>选择 {{ selectedRowKeys.length }} 项</span>
				<span v-show="selectedRowKeys.length > 0">
					<span class="clear" @click="clearSelected">清除</span>
					<a-button>删除</a-button>
				</span>
			</div>
			<div class="pagination-box">
				<Pagination
					:isView="0"
					:currentPage="currentPage"
					:total="Number(total)"
					:pageSize="pageSize"
					@page-change="PageChange"
				/>
			</div>
		</div>
  </div>
</template>

<style lang="less" scoped>
.project-plan-report-manage {

	.search-box {
		background-color: #F5F5F5;
		padding: 16px;
		border: 1px solid #E4E7ED;

		.search-box__select {
			width: 140px;
			margin-right: 20px;
		}

		.search-box__input {
			width: 240px;
			margin-right: 20px;
		}
	}

	.table-box {

		.table-box__table {

			.table-box__table__title {
				max-width: 224px;
				max-height: 44px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
				-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-line-clamp: 2;
				cursor: pointer;
			}

			.table-box__table__statistical {
				max-width: 224px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				cursor: pointer;
			}
		}
	}

	.footer {
		display: flex;
    align-items: center;
    justify-content: space-between;

		.delete-batches {
			.clear {
				margin: 0 12px;
				color: #0093FF;
				cursor: pointer;
			}
		}
	}

	.pr-16 {
		padding-right: 16px;
	}
}
</style>
